<template>
  <!-- 集团运营弹出层 -->
  <el-dialog class="operation-popup" :title="dialogTitle" :visible="showFurther" @close="showFurther = false" :close-on-click-modal="false" width="70%">
    <div class="style-flex" v-if="treeList.length">
      <el-table class="group-operation-table" :data="treeList" style="width: 100%" border row-key="projectKey" default-expand-all :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }" @row-click="openNew">
        <el-table-column label="" prop="dataName" header-align="left" align="left">
          <!-- <template slot-scope="scope">
            <div>
              {{ scope.row.dataName }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column label="计划年总收入" header-align="center" align="center" v-if="[1, 2].includes(dialogType)" key="planPrice">
          <template slot-scope="scope">
            <div>
              {{ scope.row.planPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预测年总收入" header-align="center" align="center" v-if="[1, 2].includes(dialogType)" key="forecastPrice">
          <template slot-scope="scope">
            <div>
              {{ scope.row.forecastPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="计划年总支出" header-align="center" align="center" v-if="[3].includes(dialogType)" key="planPrice">
          <template slot-scope="scope">
            <div>
              {{ scope.row.planPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预测年总支出" header-align="center" align="center" v-if="[3].includes(dialogType)" key="forecastPrice">
          <template slot-scope="scope">
            <div>
              {{ scope.row.forecastPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="本月收缴率" header-align="center" align="center" v-if="[7, 8].includes(dialogType)" key="captureRate">
          <template slot-scope="scope">
            <div>
              {{ scope.row.captureRate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="本月计划月收入" header-align="center" align="center" v-if="[9, 10].includes(dialogType)" key="forecastPrice">
          <template slot-scope="scope">
            <div class="cursor-pointer">
              {{ scope.row.planPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="本月执行月收入" header-align="center" align="center" v-if="[9, 10].includes(dialogType)" key="planPrice">
          <template slot-scope="scope">
            <div class="cursor-pointer">
              {{ scope.row.forecastPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="本月计划月支出" header-align="center" align="center" v-if="[11].includes(dialogType)" key="planPrice">
          <template slot-scope="scope">
            <div class="cursor-pointer">
              {{ scope.row.planPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="本月执行月支出" header-align="center" align="center" v-if="[11].includes(dialogType)" key="forecastPrice">
          <template slot-scope="scope">
            <div>
              {{ scope.row.forecastPrice | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="年累计净运营收入" header-align="center" align="center" v-if="[4].includes(dialogType)" key="netOperationIn">
          <template slot-scope="scope">
            <div>
              {{ scope.row.netOperationIn | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="计划" header-align="center" align="center" v-if="[4].includes(dialogType)" key="planNetOperationIn">
          <template slot-scope="scope">
            <div>
              {{ scope.row.planNetOperationIn | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="同比" header-align="center" align="center" v-if="[4, 7, 8, 9, 10, 11].includes(dialogType)" key="meanwhileCompare">
          <template slot-scope="scope">
            <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
            <template v-if="[4, 7, 8, 9, 10].includes(dialogType)">
              <template v-if="defaultShow(scope.row.meanwhileCompare)">
                {{ scope.row.meanwhileCompare }}
              </template>
              <div v-else :class="[(scope.row.meanwhileCompare + '').includes('-') ? 'down' : 'up']">
                {{ scope.row.meanwhileCompare }}
                <i :class="(scope.row.meanwhileCompare + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
            <!-- 支出 颜色不正常 绿色下降 红色 上升 -->
            <template v-else>
              <template v-if="defaultShow(scope.row.meanwhileCompare)">
                {{ scope.row.meanwhileCompare }}
              </template>
              <div v-else :class="[(scope.row.meanwhileCompare + '').includes('-') ? 'up' : 'down']">
                {{ scope.row.meanwhileCompare }}
                <i :class="(scope.row.meanwhileCompare + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="净现金流" header-align="center" align="center" v-if="[6].includes(dialogType)" key="netCash">
          <template slot-scope="scope">
            <div>
              {{ scope.row.netCash | formatMoney }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="年累计支出" header-align="center" align="center" v-if="[5].includes(dialogType)" key="capitalExpend">
          <template slot-scope="scope">
            <div>
              {{ scope.row.capitalExpend | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="计划值" header-align="center" align="center" v-if="[5, 6].includes(dialogType)" key="planCapitalExpend">
          <template slot-scope="scope">
            <div>
              {{ scope.row.planCapitalExpend | formatMoney }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="环比" header-align="center" align="center" v-if="[7, 8].includes(dialogType)" key="relativeRate">
          <template slot-scope="scope">
            <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
            <template v-if="defaultShow(scope.row.relativeRate)">
              {{ scope.row.relativeRate }}
            </template>
            <div v-else :class="[(scope.row.relativeRate + '').includes('-') ? 'down' : 'up']">
              {{ scope.row.relativeRate }}
              <i :class="(scope.row.relativeRate + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="偏差" header-align="center" align="center" v-if="[1, 2, 3, 6].includes(dialogType)" key="deviation">
          <template slot-scope="scope">
            <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
            <template v-if="[1, 2, 6].includes(dialogType)">
              <template v-if="defaultShow(scope.row.deviationRatio)">
                {{ scope.row.deviationRatio | formatMoney }}
              </template>
              <div v-else :class="[(scope.row.deviationRatio + '').includes('-') ? 'down' : 'up']">
                {{ scope.row.deviationRatio | formatMoney }}
                <i :class="(scope.row.deviationRatio + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
            <!-- 支出 颜色不正常 绿色下降 红色 上升 -->
            <template v-else>
              <template v-if="defaultShow(scope.row.deviationRatio)">
                {{ scope.row.deviationRatio | formatMoney }}
              </template>
              <div v-else :class="[(scope.row.deviationRatio + '').includes('-') ? 'up' : 'down']">
                {{ scope.row.deviationRatio | formatMoney }}
                <i :class="(scope.row.deviationRatio + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
          </template>
        </el-table-column>
        <!-- 有的偏差是百分比 -->
        <el-table-column label="偏差" header-align="center" align="center" v-if="[9, 10, 11].includes(dialogType)" key="deviation">
          <template slot-scope="scope">
            <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
            <template v-if="[9, 10].includes(dialogType)">
              <template v-if="defaultShow(scope.row.deviationRatio)">
                {{ scope.row.deviationRatio }}
              </template>
              <div v-else :class="[(scope.row.deviationRatio + '').includes('-') ? 'down' : 'up']">
                {{ scope.row.deviationRatio }}
                <i :class="(scope.row.deviationRatio + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
            <!-- 支出 颜色不正常 绿色下降 红色 上升 -->
            <template v-else>
              <template v-if="defaultShow(scope.row.deviationRatio)">
                {{ scope.row.deviationRatio }}
              </template>
              <div v-else :class="[(scope.row.deviationRatio + '').includes('-') ? 'up' : 'down']">
                {{ scope.row.deviationRatio }}
                <i :class="(scope.row.deviationRatio + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="偏差率" header-align="center" align="center" v-if="[4].includes(dialogType)" key="deviationRatio">
          <template slot-scope="scope">
            <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
            <template v-if="defaultShow(scope.row.deviationRatio)">
              {{ scope.row.deviationRatio }}
            </template>
            <div v-else :class="[(scope.row.deviationRatio + '').includes('-') ? 'down' : 'up']">
              {{ scope.row.deviationRatio }}
              <i :class="(scope.row.deviationRatio + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="偏差环比" header-align="center" align="center" v-if="[1, 2, 3].includes(dialogType)" key="deviationPrice">
          <template slot-scope="scope">
            <!-- 收入 颜色和箭头正常 绿色 上升 红色 下降 -->
            <template v-if="[1, 2].includes(dialogType)">
              <template v-if="defaultShow(scope.row.deviationPrice)">
                {{ scope.row.deviationPrice }}
              </template>
              <div v-else :class="[(scope.row.deviationPrice + '').includes('-') ? 'down' : 'up']">
                {{ scope.row.deviationPrice }}
                <i :class="(scope.row.deviationPrice + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
            <!-- 支出 颜色不正常 绿色下降 红色 上升 -->
            <template v-else>
              <template v-if="defaultShow(scope.row.deviationPrice)">
                {{ scope.row.deviationPrice }}
              </template>
              <div v-else :class="[(scope.row.deviationPrice + '').includes('-') ? 'up' : 'down']">
                {{ scope.row.deviationPrice }}
                <i :class="(scope.row.deviationPrice + '').includes('-') ? 'el-icon-bottom' : 'el-icon-top'"></i>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="完成率" header-align="center" align="center" v-if="[5, 11].includes(dialogType)" key="concludeRatio">
          <template slot-scope="scope">
            <div>
              {{ scope.row.concludeRatio }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="达成率" header-align="center" align="center" v-if="[4, 9, 10].includes(dialogType)" key="concludeRatio">
          <template slot-scope="scope">
            <div>
              {{ scope.row.concludeRatio }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="集团权重" width="100" v-if="![7, 8].includes(dialogType)" header-align="center" align="center" key="weight">
          <template slot-scope="scope">
            <div>
              {{ scope.row.weight }}
            </div>
          </template>
        </el-table-column>
         <el-table-column label="操作" width="100" header-align="center" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.planType">
              <el-button type="text" @click.stop="actionClick(scope.row)">调研</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
    <AddWork ref="addWork" :project-key="projectKey"></AddWork>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs';
import AddWork  from '@/pages/businessAssets/pages/workTrace/components/addWork'
import { apiEarningRightsDeviation, apiNetOperatingIncome, apiCapitalExpend, apiNetCash, apiContractCaliberCapture, apiRightsCaliberCapture, apiMonthEarningRightsDeviation } from '../api/operationPopup';
import { getMenuList } from '@/api';
export default {
  components:{AddWork},
  props: {
    selectTime: {
      type: String,
      default: '',
    },
    dialogType: {
      type: Number,
      default: 1,
    },
    operationType: {
      // 运营类型  1:集团运营 2：商管运营
      type: Number,
      default: 1,
    },
    showMonth: {
      type: Number,
      default: null,
    },
  },

  data() {
    return {
      treeList: [],
      defaultProps: {
        children: 'childList',
        label: 'dataName',
      },
      tableData: [],
      showFurther: false,
      hasChildren: true,
      dialogTypeMap: {
        1: '年总收入偏差分析（权责）',
        2: '年总收入偏差分析（现金流）',
        3: '年总支出偏差分析（现金流）',
        4: '净运营收入',
        5: '资本性支出',
        6: '净现金流',
        7: '合约口径缴费率',
        8: '权责口径缴费率',
        9: '权责月收入',
        10: '现金流月收入',
        11: '现金流月支出',
      },
      projectKey:""
    };
  },
  methods: {
    actionClick(row){
      console.log(row)
      this.projectKey = row.projectKey
      this.$refs['addWork'].init()
    },
    async getTreeList(row) {
      let res = {};
      let param = {
        planYear: row ? row.planYear : this.selectTime.substr(0, 4),
        planMonth: row ? row.planMonth : this.selectTime.substr(5, 2) > 9 ? this.selectTime.substr(5, 2) : this.selectTime.substr(6, 1),
        primaryKey: this.$route.query.planKey ? this.$route.query.planKey : null,
      };
      if (this.dialogType == 1 || this.dialogType == 2 || this.dialogType == 3) {
        param.type = this.dialogType;
        res = await apiEarningRightsDeviation(param);
        this.chooseData(res);
      } else if (this.dialogType == 4) {
        res = await apiNetOperatingIncome(param);
        this.chooseData(res);
      } else if (this.dialogType == 5) {
        res = await apiCapitalExpend(param);
        this.chooseData(res);
      } else if (this.dialogType == 6) {
        res = await apiNetCash(param);
        this.chooseData(res);
      } else if (this.dialogType == 7) {
        param.type = 1
        res = await apiContractCaliberCapture(param);
        this.chooseData(res);
      } else if (this.dialogType == 8) {
        param.type = 2
        res = await apiRightsCaliberCapture(param);
        this.chooseData(res);
      } else if (this.dialogType == 9) {
        param.type = 1;
        param.planInfoMonth = JSON.stringify(this.showMonth);
        res = await apiMonthEarningRightsDeviation(param);
        this.chooseData(res);
      } else if (this.dialogType == 10) {
        param.type = 2;
        param.planInfoMonth = JSON.stringify(this.showMonth);
        res = await apiMonthEarningRightsDeviation(param);
        this.chooseData(res);
      } else if (this.dialogType == 11) {
        param.type = 3;
        param.planInfoMonth = JSON.stringify(this.showMonth);
        res = await apiMonthEarningRightsDeviation(param);
        this.chooseData(res);
      }
    },
    chooseData(res) {
      this.treeList = res.rows || [];
    },
    async openNew(row) {
      if (row.childList && row.childList.length) {
        return;
      }
      if (this.operationType == 1) {
        let currentYear = this.selectTime.substr(0, 4)
        let planType = row.planType == 1 ? "年度计划" : "执行计划"
        let planName = currentYear + '年' + this.month + '月' + planType
        if (row.primaryKey) {
          let pathUrl = {
            name: 'plan-info-plan-view',
            query: {
              planKey: row.primaryKey,
              headerName:planName,
              type:2
            }
          };
          let { href } = this.$router.resolve(pathUrl);
          window.open(href);
        } else {
          this.$message.warning('该项目暂无计划');
        }
      }
    },
    defaultShow(value) {
      if (value + '' === '-' || value == 0 || !value || value == '0%') {
        return true;
      }
    },
  },
  computed: {
    dialogTitle() {
      let month = this.showMonth ? this.showMonth : this.month;
      return this.dialogTypeMap[this.dialogType] + '（' + month + '月）';
    },
    month() {
      return dayjs(this.selectTime).month() + 1;
    },
  },
};
</script>

<style lang="scss">
.operation-popup {
  .el-dialog__header {
    background: #444444;
  }
}
.style-flex {
  display: flex;
  .dialogTree {
    width: 210px;
    margin-right: 10px;
    .el-tree-node__content {
      padding-left: 10px;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      .active {
        color: #333;
      }
    }
  }
  .el-table {
    flex: 1;
  }
}
.cursor-pointer{
  cursor: pointer;
}
</style>
